<template>
    <div class="box">
        <el-button class="title" type="text" @click="dialogFormVisible = true">修改密码</el-button>
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password1" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePassword">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                password1: '',
                password: ''
            },
            formLabelWidth: '120px'
        }
    },
    methods: {
        async changePassword() {
            if (this.form.password != this.form.password1) {
                this.$message({
                    message: '两次密码不一致',
                    type: 'error'
                })
                return 
            }
            if (this.form.password === '' || this.form.password1 === '') {
                this.$message({
                    message: '密码不能为空',
                    type: 'error'
                })
                return 
            }
            let self = this
            let token = localStorage.getItem('token')
            let res = await this.$ajax.patch('/api/users/changePass', {
                password: self.form.password
            }, {
                headers: {
                    authorization: token
                }
            })
            this.$message({
                message: res.data.message,
                type: 'success'
            })
            this.dialogFormVisible = false
        }
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}

.title {
    color: white;
}

.box {
    width: 50px;
}
</style>